<template>
  <div class="addContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <template #header>
            <span style="font-weight: bold; font-size: 16px">编辑销售出库</span>
          </template>
          <div class="addBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">基础信息</div>
              </div>
              <el-form
                style="margin-top: 40px"
                label-width="120"
                :model="saleForm"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="出库单编号"
                      required
                      prop="outStoreListId"
                    >
                      <el-input
                        v-model="saleForm.outStoreListId"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="出库单名称"
                      required
                      prop="outStoreListName"
                    >
                      <el-input
                        v-model="saleForm.outStoreListName"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="出货检验单" prop="outStoreListName">
                      <el-input
                        v-model="saleForm.outStoreListName"
                        style="width: 300px"
                        placeholder="请选择出货检验单"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="出货检验单号" prop="outStoreListId">
                      <el-input
                        v-model="saleForm.outStoreListId"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="出库日期" prop="outStoreDate">
                      <el-date-picker
                        v-model="saleForm.outStoreDate"
                        type="date"
                        placeholder="请选择日期"
                        style="width: 300px"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="销售单号" required prop="salesListId">
                      <el-input
                        v-model="saleForm.salesListId"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="销售单名称" property="salesListName">
                      <el-input
                        v-model="saleForm.salesListName"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户名称" prop="customerName">
                      <el-input
                        v-model="saleForm.customerName"
                        placeholder="请选择客户"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-form-item label="备注">
                <el-input
                  type="textarea"
                  style="width: 820px"
                  :rows="4"
                ></el-input>
              </el-form-item> -->
              </el-form>
            </div>
            <div class="bomContainer">
              <div class="bomInfoContainer">
                <div class="milestone">
                  <div class="milestone-content">出库明细</div>
                </div>
                <el-form
                  style="margin-top: 40px"
                  label-width="120"
                  :model="saleForm"
                >
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="产品名称" prop="productName">
                        <el-input
                          v-model="saleForm.productName"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="产品编号" prop="productId">
                        <el-input
                          v-model="saleForm.productId"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="规格型号" prop="specs">
                        <el-input
                          v-model="saleForm.specs"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="单位" prop="unit">
                        <el-input
                          v-model="saleForm.unit"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="生产日期" prop="produceDate">
                        <el-date-picker
                          v-model="saleForm.produceDate"
                          style="width: 300px"
                          type="date"
                          placeholder="请选择日期"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="到期日期" prop="endDate">
                        <el-date-picker
                          v-model="saleForm.endDate"
                          style="width: 300px"
                          type="date"
                          placeholder="请选择日期"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="批次号" prop="batchId">
                        <el-input
                          v-model="saleForm.batchId"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label="出库数量"
                        required
                        prop="outStoreNum"
                      >
                        <el-input
                          v-model="saleForm.outStoreNum"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="storeName">
                        <el-input
                          v-model="saleForm.storeName"
                          placeholder="请选择仓库名称"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="仓库负责人" prop="leader">
                        <el-input
                          v-model="saleForm.leader"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
        <el-button type="primary" style="width: 80px" @click="handleSubmit"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { SalesOutStoreAddParamsType } from "@/api/SalesOutStore/params";
import { ElMessage } from "element-plus";
import { putSalesOutStoreUpdateApi } from "@/api/SalesOutStore";
import { useRoute } from "vue-router";
import { getSalesOutStoreListApi } from "@/api/SalesOutStore";

const router = useRouter();
const route = useRoute();
let objectId = "";
const isFooterVisible = ref(false);

const saleForm = ref<SalesOutStoreAddParamsType>({
  shippingCheckList: "",
  salesListId: "",
  outStoreDate: "",
  storeLocationName: "库位02",
  storeAreaName: "库区二",
  unit: "",
  outStoreListId: "",
  outStoreListName: "",
  customerName: "",
  produceDate: "",
  productName: "",
  salesListName: "",
  productId: "",
  outStoreNum: "",
  endDate: "",
  leader: "",
  specs: "",
  batchId: "",
  storeName: "",
});

const close = () => {
  router.replace("/storage/entrance/sale");
};

onMounted(async () => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
  objectId = route.query.objectId as string;
  try {
    const res = await getSalesOutStoreListApi({ objectId: objectId });
    saleForm.value = res.results[0];
  } catch (err: any) {
    console.log(err);
    ElMessage.error("获取数据失败");
  }
});

const handleSubmit = async () => {
  try {
    const res = await putSalesOutStoreUpdateApi({
      objectId: objectId,
      shippingCheckList: saleForm.value.shippingCheckList,
      salesListId: saleForm.value.salesListId,
      outStoreDate: saleForm.value.outStoreDate,
      storeLocationName: saleForm.value.storeLocationName,
      storeAreaName: saleForm.value.storeAreaName,
      unit: saleForm.value.unit,
      outStoreListId: saleForm.value.outStoreListId,
      outStoreListName: saleForm.value.outStoreListName,
      customerName: saleForm.value.customerName,
      produceDate: saleForm.value.produceDate,
      productName: saleForm.value.productName,
      salesListName: saleForm.value.salesListName,
      productId: saleForm.value.productId,
      outStoreNum: saleForm.value.outStoreNum,
      endDate: saleForm.value.endDate,
      leader: saleForm.value.leader,
      specs: saleForm.value.specs,
      batchId: saleForm.value.batchId,
      storeName: saleForm.value.storeName,
    });
    ElMessage.success("编辑成功");
    console.log(res);
    router.replace("/storage/entrance/sale");
  } catch (err) {
    console.log(err);
    ElMessage.error("编辑失败");
  }
};
</script>

<style scoped lang="scss">
.addContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .addBody {
    width: 100%;
    .basicInfoContainer,
    .bomInfoContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .bomInfoContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>
